<template>
  <el-date-picker
    :modelValue="val"
    :type="ui.type"
    :arrow-control="ui.arrowControl"
    :clearable="ui.clearable"
    :popper-class="ui.popperClass"
    :placeholder="ui.placeholder"
    :size="ui.size"
    :start-placeholder="ui.startPlaceholder"
    :end-placeholder="ui.endPlaceholder"
    :range-separator="ui.rangeSeparator"
    :disabled="ui.disabled"
    :format="ui.format"
    :default-value="ui.defaultValue"
    :default-time="ui.defaultTime"
    :editable="ui.editable"
    @update:model-value="updateValue"
  />
</template>
<script lang="ts" setup name="lc-sf-date">
import { inject, computed } from "vue";
import { DateUI } from "../interface";
import { SFService } from "../sf.service";
import { TItemOption } from "../type";
const props = defineProps<TItemOption<DateUI>>();
const sf = inject<SFService>("sf-service");
const val = computed(() => {
  const date = sf.getVaule(props.keyPath);
  return date?.indexOf(",") ? date.split(",").map(r => Number(r)) : date;
});
const ui = props.service.getUI<DateUI>();
const updateValue = (val: Date | Date[]) => {
  if (ui.change) {
    ui.change(val);
  }
  if (
    ["datetimerange", "daterange", "monthrange"].includes(ui.type) &&
    Array.isArray(val)
  ) {
    const record = val.map(res => new Date(res).getTime()).join(",");
    sf.setVaule(props.keyPath, record);
  } else {
    sf.setVaule(props.keyPath, val);
  }
};
</script>
../types
